﻿@{ 
    Script.Require("jQuery_SignalR_Hubs").AtHead();
    
    Script.Include("proligence-signalr-common.js").AtHead();
    Script.Include("samples/jcanvas.js").AtFoot();
    Script.Include("samples/drawingpad.js").AtFoot();
}
<style type="text/css">
    #pad {
        border: 3px solid silver;
    }
</style>
<div id="connecting">
    Please while the connection is established...
</div>
<div id="connected" style="display: none">
    <canvas width="500" height="400" id="pad">
        <p>Unsupported brower</p>
    </canvas>
</div>
<script type="text/javascript">
    $(function () {
        var drawingPad = $.connection.DrawingPad;

        // someone draw something
        drawingPad.client.draw = function (value) {
            $("#pad").drawingpad("line", value);
        };

        $.connection.hub.start({ transport: activeTransport }, function () {
            drawingPad.server.join().done(function () {
                $("#connecting").hide();
                $("#connected").show();

                color = drawingPad.state.color;

                // Listen for drawing
                $("#pad").drawingpad({ linecolor: color }).bind('line.drawingpad', function (event, args) {
                    drawingPad.server.Draw(args);
                });
            });
        });
    });
</script>
